<h1>
	Ext.DomQuery
</h1>

<div id="dq-about" class="sect">
	<h2>
		什么是DomQuery？
	</h2>
	<p>
		DomQuery的作用在于提供选择符（Selector）、XPath的快速元素定位，对HTML与XML的文档都有效。DomQuery支持到CSS3规范的选择符，还有一些自定义的选择符与较简单的，一份完整的CSS3规范在
		<a href="http://www.w3.org/TR/css3-selectors/">这里</A>。
	</P>
</div>


<style type="text/css">
li.list {
	list-style: disc outside;
	margin-left: 20px;
}
</style>
<div id="multiple-selectors" class="sect">
	<h2>
		多选择符
	</h2>
	<p>
		你可以输入多个查询条件，然后在一个对象上面返回。
	</p>
	<pre>
<span class="comment">// 匹配所有的带foo class的div和带bar class的span</span>
Ext.select('div.foo, span.bar');
</pre>
</div>

<div id="root-selectors" class="sect">
	<h2>
		根节点
	</h2>
	<p>
		使用选择符，它可以支持一个根节点的概念。根节点的意思是如果有指定选择符的根节点表示从该节点上开始进行搜索。这样可以助于提升性能，因为若不存在根节点表示从document
		body开始进行搜索，速度自然比较慢。
	</p>
	<pre>Ext.get('myEl').select('div.foo');<span class=comment>// 这是等价的</SPAN>
Ext.select('div.foo', true, 'myEl');<span class=comment>// 这是等价的</SPAN>
</PRE>
</div>

<div id="chain-selectors" class="sect">
	<h2>
		查询链
	</h2>
	<p>
		对于构成复杂的查询情况，可以由多个查询条件组成查询链。依次按顺序进行属性链的查询。
	</p>
	<pre><span class=comment>// 匹配class为foo的div，要求是有title属性为bar的div，而且还是这个div下面最前头的子元素</SPAN>
Ext.select('div.foo[title=bar]:first');
</PRE>
</div>

<div id="element-selectors" class="sect">
	<h2>
		元素选择符
	</h2>
	<p>
		<ul>
			<li class="list">
				<b>*</b> 任意元素
			</li>
			<li class="list">
				<b>E</b> 一个标签为 E 的元素
			</li>
			<li class="list">
				<b>E F</b> 所有 E 元素的分支元素中含有标签为 F 的元素
			</li>
			<li class="list">
				<b>E > F</b> 或
				<b>E/F</b> 所有 E 元素的直系子元素中含有标签为 F 的元素
			</li>
			<li class="list">
				<b>E + F</b> 所有标签为 F 并紧随着标签为 E 的元素之后的元素
			</li>
			<li class="list">
				<b>E ~ F</b> 所有标签为 F 并与标签为 E 的元素是侧边的元素
			</li>
		</ul>
	</p>
	<pre>
<span class="comment">// 匹配全部 div元素</span>
Ext.select('div'); 
<span class="comment">// 匹配全部 包含在div元素（不限制间隔层数）中的span元素 </span>
Ext.select('div span');
<span class="comment">// 匹配全部是ul元素子元素的li元素</span>
Ext.select('ul > li'); 
</pre>
</div>

<div id="attribute-selectors" class="sect">
	<h2>
		属性选择符
	</h2>
	<p>
		<ul>
			<li class="list">
				<b>E.foo</b> 元素带有样式类 “foo”
			</li>
			<li class="list">
				<b>E[foo]</b> 拥有一个名为 “foo” 的属性
			</li>
			<li class="list">
				<b>E[foo=bar]</b> 拥有一个名为 “foo” 且值为 “bar” 的属性
			</li>
			<li class="list">
				<b>E[foo^=bar]</b> 拥有一个名为 “foo” 且值以 “bar” 开头的属性
			</li>
			<li class="list">
				<b>E[foo$=bar]</b> 拥有一个名为 “foo” 且值以 “bar” 结尾的属性
			</li>
			<li class="list">
				<b>E[foo*=bar]</b> 拥有一个名为 “foo” 且值包含字串 “bar” 的属性 substring "bar"
			</li>
			<li class="list">
				<b>E[foo%=2]</b> 拥有一个名为 “foo” 且值能够被2整除的属性
			</li>
			<li class="list">
				<b>E[foo!=bar]</b> 拥有一个名为 “foo” 且值不为 “bar” 的属性
			</li>
		</ul>
	</p>
	<pre>
<span class="comment">// 匹配包含样式类“news”的div元素</span>
Ext.select('div.news'); 
<span class="comment">//匹配全部href属性为http://extjs.com A元素</span>
Ext.select('a[href=http://extjs.com]'); 
<span class="comment">// 匹配全部具有alt属性的img元素</span>
Ext.select('img[alt]'); 
</pre>
</div>

<div id="pseudo-selectors" class="sect">
	<h2>
		伪类选择符
	</h2>
	<p>
		<ul>
			<li class="list">
				<b>E:first-child</b> E 元素为其父元素的第一个子元素
			</li>
			<li class="list">
				<b>E:last-child</b> E 元素为其父元素的最后一个子元素
			</li>
			<li class="list">
				<b>E:nth-child(n)</b> E 元素为其父元素的第
				<i>n</i> 个子元素（由1开始的个数）
			</li>
			<li class="list">
				<b>E:nth-child(odd)</b> E 元素为其父元素的奇数个数的子元素
			</li>
			<li class="list">
				<b>E:nth-child(even)</b>E 元素为其父元素的偶数个数的子元素
			</li>
			<li class="list">
				<b>E:only-child</b>E 元素为其父元素的唯一子元素
			</li>
			<li class="list">
				<b>E:checked</b> E 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框）
			</li>
			<li class="list">
				<b>E:first</b> 结果集中第一个 E 元素
			</li>
			<li class="list">
				<b>E:last</b> 结果集中最后一个 E 元素
			</li>
			<li class="list">
				<b>E:nth(n)</b> 结果集中第
				<i>n</i> 个 E 元素（由1开始的个数）
			</li>
			<li class="list">
				<b>E:odd</b> :nth-child(odd) 的简写
			</li>
			<li class="list">
				<b>E:even</b> :nth-child(even) 的简写
			</li>
			<li class="list">
				<b>E:contains(foo)</b> E 元素的 innerHTML 属性中包含“foo”字串
			</li>
			<li class="list">
				<b>E:nodeValue(foo)</b>E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
				equals "foo"
			</li>
			<li class="list">
				<b>E:not(S)</b>一个与简单选择符 S 不匹配的 E 元素
			</li>
			<li class="list">
				<b>E:has(S)</b> 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
			</li>
			<li class="list">
				<b>E:next(S)</b> 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
			</li>
			<li class="list">
				<b>E:prev(S)</b> 上一个侧边元素为与简单选择符 S 相匹配的 E 元素
			</li>
		</ul>
	</p>
	<pre>
<span class="comment">// Matches the first div with a class of code</span>
Ext.select('div.code:first'); 
<span class="comment">// Matches spans that fall on an even index.</span>
Ext.select('span:even'); 
<span class="comment">// Matches all divs whos next sibling is a span with class header.</span>
Ext.select('div:next(span.header)); 
</pre>
</div>

<div id="css-selectors" class="sect">
	<h2>
		CSS 值选择符
	</h2>
	<p>
		<ul>
			<li  class="list">
				<b>E{display=none}</b> css 的“display”属性等于“none”
			</li>
			<li  class="list">
				<b>E{display^=none}</b> css 的“display”属性以“none”开始
			</li>
			<li  class="list">
				<b>E{display$=none}</b> css 的“display”属性以“none”结尾
			</li>
			<li  class="list">
				<b>E{display*=none}</b> css 的“display”属性包含字串“none”
			</li>
			<li  class="list">
				<b>E{display%=2}</b> css 的“display”属性能够被2整除
			</li>
			<li  class="list">
				<b>E{display!=none}</b> css 的“display”属性不等于“none”
			</li>

		</ul>
	</p>
</div>
